import React, { FC } from "react";
import { Button, Space, Tooltip } from "antd";
import {
  DeleteOutlined,
  EyeInvisibleOutlined,
  LockOutlined,
  CopyOutlined,
  BlockOutlined,
  UpOutlined,
  DownOutlined,
  UndoOutlined,
  RedoOutlined
} from "@ant-design/icons";
import { useDispatch } from "react-redux";
import {
  deleteComponent,
  hiddenComponent,
  lockedComponent,
  copyComponent,
  pasteComponent,
  moveComponent,
} from "../../../store/componentsReducer";
import useGetComponentInfo from "../../../hooks/useGetComponentInfo";
import { ActionCreators } from "redux-undo";

const EditToolbar: FC = () => {
  const {
    selectId,
    selectedComponent,
    componentList = [],
    copiedComponent,
  } = useGetComponentInfo();
  const length = componentList.length;
  const selectIndex = componentList.findIndex((c) => c.fe_id === selectId);
  const isFirst = selectIndex <= 0;
  const isEnd = selectIndex == length - 1;
  const { isLocked } = selectedComponent || {};
  const dispatch = useDispatch();
  //删除组件
  const handleDelete = () => {
    dispatch(deleteComponent());
  };
  //隐藏组件
  const handleHidden = () => {
    dispatch(hiddenComponent({ fe_id: selectId, isHidden: true }));
  };
  //锁定组件
  const handleLocked = () => {
    dispatch(lockedComponent({ fe_id: selectId }));
  };
  //复制组件
  const handleCopy = () => {
    dispatch(copyComponent());
  };
  //粘贴组件
  const handlePaste = () => {
    dispatch(pasteComponent());
  };
  //上移
  const moveUp = () => {
    if (isFirst) return;
    dispatch(
      moveComponent({
        oldIndex: Number(selectIndex),
        newIndex: Number(selectIndex) - 1,
      })
    );    
  };
  //下移
  const moveDown = () => {
    if (isEnd) return;
    dispatch(
      moveComponent({
        oldIndex: Number(selectIndex),
        newIndex: Number(selectIndex) + 1,
      })
    );    
  };
  //撤销
  const undo = () => {
    dispatch(ActionCreators.undo())
  }
  //重做
  const redo = () => {
    dispatch(ActionCreators.redo())
  }
  return (
    <Space>
      <Tooltip title="删除">
        <Button
          shape="circle"
          icon={<DeleteOutlined />}
          onClick={handleDelete}
        ></Button>
      </Tooltip>
      <Tooltip title="隐藏">
        <Button
          shape="circle"
          icon={<EyeInvisibleOutlined />}
          onClick={handleHidden}
        ></Button>
      </Tooltip>
      <Tooltip title="锁定">
        <Button
          shape="circle"
          icon={<LockOutlined />}
          onClick={handleLocked}
          type={isLocked ? "primary" : "default"}
        ></Button>
      </Tooltip>
      <Tooltip title="复制">
        <Button
          shape="circle"
          icon={<CopyOutlined />}
          onClick={handleCopy}
        ></Button>
      </Tooltip>
      <Tooltip title="粘贴">
        <Button
          shape="circle"
          icon={<BlockOutlined />}
          onClick={handlePaste}
          disabled={copiedComponent == null}
        ></Button>
      </Tooltip>
      <Tooltip title="上移">
        <Button
          shape="circle"
          icon={<UpOutlined />}
          onClick={moveUp}
          disabled={isFirst}
        ></Button>
      </Tooltip>
      <Tooltip title="下移">
        <Button
          shape="circle"
          icon={<DownOutlined />}
          onClick={moveDown}
          disabled={isEnd}
        ></Button>
      </Tooltip>
      <Tooltip title="撤销">
        <Button
          shape="circle"
          icon={<UndoOutlined />}
          onClick={undo}
        ></Button>
      </Tooltip>
      <Tooltip title="重做">
        <Button
          shape="circle"
          icon={<RedoOutlined />}
          onClick={redo}
        ></Button>
      </Tooltip>
    </Space>
  );
};

export default EditToolbar;
